import React, { Component } from 'react';
import {
  StyleSheet, View, DeviceEventEmitter, Text, TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Incident from './incident';
import Devices from './devices';
import Inspection from './inspection';
import ChangePart from './changePart';
import Part from './part';
import Theme from '../../native-base-theme/variables/commonColor';
import ZlstIcon from '../../components/zlst-icons';


class MainView extends Component {
  static navigationOptions = {
    header: null,
  }

  constructor(props) {
    super(props);
    this.state = {
      pageIndex: 'incident',
      showTopBar: false,
    };
  }

  componentDidMount() {
    DeviceEventEmitter.addListener('showTopBarEvent', this.showTopBarEvent);
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('showTopBarEvent');
  }

  showTopBarEvent = (flag) => {
    if (flag == 'hide') {
      this.setState({ showTopBar: false });
    } else {
      this.setState({ showTopBar: !this.state.showTopBar });
    }
  }

  changePageIndex = (index) => {
    this.setState({ pageIndex: index, showTopBar: false }, () => {
      if (this.state.pageIndex === 'incident' || this.state.pageIndex === 'facilitiesIncident') {
        DeviceEventEmitter.emit('refreshPageEvent');
        DeviceEventEmitter.emit('refreshSearchPageEvent');
      }
    });
  }

  render() {
    let mPage = null;
    if (this.state.pageIndex === 'incident' || this.state.pageIndex === 'facilitiesIncident') {
      mPage = <Incident category={this.state.pageIndex} />;
    } else if (this.state.pageIndex === 'devices') {
      mPage = <Devices />;
    } else if (this.state.pageIndex === 'inspection') {
      mPage = <Inspection />;
    } else if (this.state.pageIndex === 'part') {
      mPage = <Part />;
    } else if (this.state.pageIndex === 'changePart') {
      mPage = <ChangePart />;
    }
    return (
      <View style={styles.container}>
        {this.state.showTopBar && (
          <View style={styles.module_container}>
            <TouchableOpacity style={styles.icon_container} onPress={() => this.changePageIndex('facilitiesIncident')}>
              <View style={[styles.icon_font, { backgroundColor: this.state.pageIndex === 'facilitiesIncident' ? '#A3A3AB' : '#313042' }]}>
                <ZlstIcon
                  name="weixiujilu"
                  size={36}
                  style={{ width: 36, height: 36 }}
                  color={this.state.pageIndex === 'facilitiesIncident' ? 'white' : '#ACACB3'}
                />
              </View>
              <Text style={styles.icon_text}>设施隐患</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.icon_container} onPress={() => this.changePageIndex('incident')}>
              <View style={[styles.icon_font, { backgroundColor: this.state.pageIndex === 'incident' ? '#A3A3AB' : '#313042' }]}>
                <ZlstIcon
                  name="beipinbeijian"
                  size={36}
                  style={{ width: 36, height: 36 }}
                  color={this.state.pageIndex === 'incident' ? 'white' : '#ACACB3'}
                />
              </View>
              <Text style={styles.icon_text}>设备故障</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.icon_container} onPress={() => this.changePageIndex('devices')}>
              <View style={[styles.icon_font, { backgroundColor: this.state.pageIndex === 'devices' ? '#A3A3AB' : '#313042' }]}>
                <ZlstIcon
                  name="shebei"
                  size={36}
                  style={{ width: 36, height: 36 }}
                  color={this.state.pageIndex === 'devices' ? 'white' : '#ACACB3'}
                />
              </View>
              <Text style={styles.icon_text}>设备</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.icon_container} onPress={() => this.changePageIndex('inspection')}>
              <View style={[styles.icon_font, { backgroundColor: this.state.pageIndex === 'inspection' ? '#A3A3AB' : '#313042' }]}>
                <ZlstIcon
                  name="xunjian"
                  size={36}
                  style={{ width: 36, height: 36 }}
                  color={this.state.pageIndex === 'inspection' ? 'white' : '#ACACB3'}
                />
              </View>
              <Text style={styles.icon_text}>点巡检</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.icon_container} onPress={() => this.changePageIndex('part')}>
              <View style={[styles.icon_font, { backgroundColor: this.state.pageIndex === 'part' ? '#A3A3AB' : '#313042' }]}>
                <Icon
                  name="codepen"
                  size={36}
                  style={{ width: 36, height: 36 }}
                  color={this.state.pageIndex === 'part' ? 'white' : '#ACACB3'}
                />
              </View>
              <Text style={styles.icon_text}>备品备件</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.icon_container} onPress={() => this.changePageIndex('changePart')}>
              <View style={[styles.icon_font, { backgroundColor: this.state.pageIndex === 'changePart' ? '#A3A3AB' : '#313042' }]}>
                <Icon
                  name="memory"
                  size={36}
                  style={{ width: 36, height: 36 }}
                  color={this.state.pageIndex === 'changePart' ? 'white' : '#ACACB3'}
                />
              </View>
              <Text style={styles.icon_text}>换下件</Text>
            </TouchableOpacity>
          </View>
        )}
        {mPage}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  module_container: {
    flexDirection: 'row',
    backgroundColor: Theme.myPrimary,
    flexWrap: 'wrap',
  },
  icon_font: {
    padding: 8,
    borderRadius: 60,
    borderColor: '#A3A3AB',
    borderStyle: 'solid',
    borderWidth: 1,
  },
  container: {
    flex: 1,
    backgroundColor: '#EDF5FA',
    flexDirection: 'column',
  },
  icon_container: {
    padding: 8,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  icon_text: {
    marginTop: 4,
    color: 'white',
  },
});

export default MainView;
